﻿@{
    ViewBag.Title = "潮汐表";
    Layout = "~/Views/Shared/_LayoutIndexSearch.cshtml";
}

<script type="text/javascript">
    $(function () {
        var stationSearch = $('<div class="ui-form-item ui-border-b" style="padding: 5px"><div class="row"><label class="col-xs-3" style="text-align: right;' +
        ' padding-top: 8px; position: inherit; align-content: center;">站点</label><div class="col-xs-9"><select id="selectedStationName"' +
        ' class="combobox form-control" name="horizontal" required="required" style="background-color: #eee"><option value="1" selected="selected">双溪口</option>' +
        '<option value="2">潮汐表</option></select></div></div></div>');
        $("#searchOptionDiv").prepend(stationSearch);
    });

</script>



<ul id="myTab" class="nav nav-tabs row">
    <li class="active col-xs-4">
        <a href="#process" data-toggle="tab">
            过程图
        </a>
    </li>
    <li class="col-xs-4">
        <a href="#dataTable" data-toggle="tab">
            数据表
        </a>
    </li>
    <li class="col-xs-4">
        <a href="#higherlowtide" data-toggle="tab">
            高低潮
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="process">
        
        @*<div class="ui-form ui-border-t">

            <div class="ui-form-item ui-border-b" style="padding: 5px">
                <div class="row">
                    <label class="col-xs-2" style="text-align: right; padding-top: 8px; position: inherit; align-content: center;">省市</label>
                    <div class="col-xs-4">
                        <select id="selectedStationName" class="combobox form-control" name="horizontal" required="required" style="background-color: #eee">
                            <option value="北京" selected="selected">北京</option>
                            <option value="南京">南京</option>
                        </select>
                    </div>

                    <label class="col-xs-2" style="text-align: right; padding-top: 8px; position: inherit; align-content: center;">站点</label>
                    <div class="col-xs-4">
                        <select class="combobox form-control" name="horizontal" required="required" style="background-color: #eee">
                            <option value="双溪口" selected="selected">双溪口</option>
                            <option value="带峨山">带峨山</option>
                        </select>
                    </div>
                </div>
            </div>

            <div style="position: relative; top: 20px" align="center"><span style="font-size: 24px">2018年5月6日~2019年7月4日</span></div>
        </div>*@
    </div>
    <div class="tab-pane fade" id="dataTable">
        <table id="myTable" class="table table-striped table-bordered table-hover">
            <tr class="tab-pane">
                <th id="th0" class="col-xs-6">时间</th>
                <th id="th1" class="col-xs-6">潮位</th>
                @*<th id="th2" class="as">累计雨量(mm)</th>*@
            </tr>
            @*写数据*@
            <tr>
                <td name='td0'>2018年4月9日</td>
                <td name='td1'>50</td>
                @*<td name='td2'>30</td>*@
            </tr>
        </table>

    </div>

    <div class="tab-pane fade" id="higherlowtide">
        高低潮

        <div id="tableDiv" style="height: 100px">
            <table class="table table-striped table-bordered table-hover">
                <tr class="tab-pane">
                    <th class="col-xs-4">类型</th>
                    <th class="col-xs-4">时间</th>
                    <th class="col-xs-4">潮位</th>
                </tr>
                <tr>
                    <td style="background-color: #ccc">高潮</td>
                    <td style="background-color: #eee; color: red">2018年3月2日</td>
                    <td style="background-color: #eee; color: red">60</td>
                </tr>
                <tr>
                    <td style="background-color: #ccc">低潮</td>
                    <td style="background-color: #eee; color: red">2018年3月2日</td>
                    <td style="background-color: #eee; color: red">20</td>
                </tr>
            </table>
        </div>
    </div>

</div>


